<script setup lang="tsx">
import { useEnumeratePicker, useEnumerateMultiplePicker } from '@/utils'
import { orderRemarkApi } from '@/api/order'
const { t } = useI18n()

const props = defineProps({
  currentRow: {
    type: Object,
    default: () => null
  },
  operatorOptions: {
    type: Object,
    default: () => null
  }
})
// 切换展开/收起状态的方法
const isExpanded = ref(true)
const togglePanel = () => {
  isExpanded.value = !isExpanded.value
}

// 计算异常状态的显示文本
const exceptionStatusText = computed(() => {
  if (!props.currentRow?.exceptionstatus) return ''

  const exceptionStatuses = props.currentRow.exceptionstatus
    .split(',')
    .filter((status) => status.trim())
  console.log(exceptionStatuses)
  const exceptionStatusesValue = exceptionStatuses.map((status) =>
    useEnumeratePicker(props.operatorOptions.exceptionstatus, Number(status))
  )

  return exceptionStatusesValue.join(', ')
})

const showEditDialog = ref(false)
const editedOrderRemark = ref(props.currentRow.order_remark)

const saveOrderRemark = async () => {
  if (editedOrderRemark.value) {
    showEditDialog.value = false
    let res = await orderRemarkApi(props.currentRow.id, {
      id: props.currentRow.id,
      order_remark: editedOrderRemark.value
    })
    console.log('22', res)
    if (res.code === 0) {
      ElMessage.success(t('common.updateSucMsg'))
      emit('refresh')
    }
  }
}

const emit = defineEmits(['refresh'])
</script>

<template>
  <el-card shadow="always">
    <div @click="togglePanel" class="header cursor-pointer">
      <span>{{ t('order.baseInfo') }}</span>
      <el-icon v-if="isExpanded">
        <el-icon-arrow-down />
      </el-icon>
      <el-icon v-else>
        <el-icon-arrow-right />
      </el-icon>
    </div>
    <el-collapse-transition>
      <div v-show="isExpanded" class="w-full flex justify-between">
        <div class="w-100%">
          <el-descriptions
            :title="t('order.baseInfo')"
            border
            :column="1"
            label-align="left"
            content-align="left"
          >
            <el-descriptions-item :span="24" :label="t('common.serialNumber')">
              {{ currentRow?.id }}
            </el-descriptions-item>
            <el-descriptions-item :span="24" :label="t('order.contract_type')">
              {{
                useEnumeratePicker(operatorOptions.contract_type, currentRow?.contract_type ?? '')
              }}
            </el-descriptions-item>
            <el-descriptions-item
              :span="24"
              :label="t('wholesalOrder.wholesal')"
              v-if="currentRow.isWholesal"
            >
              {{ currentRow?.user_name }}
            </el-descriptions-item>
            <el-descriptions-item
              :span="24"
              :label="t('order.customer')"
              v-if="!currentRow.isWholesal"
            >
              {{ currentRow?.user_name }}
            </el-descriptions-item>
            <el-descriptions-item
              :span="24"
              :label="t('order.customerEmailAddress')"
              v-if="!currentRow.isWholesal"
            >
              {{ currentRow?.user_email }}
            </el-descriptions-item>
            <el-descriptions-item :span="24" :label="t('order.orderCode')">
              {{ currentRow?.order_no }}
            </el-descriptions-item>
            <el-descriptions-item :span="24" :label="t('order.signatory')">
              {{ useEnumeratePicker(operatorOptions.operator, currentRow?.signatory ?? '') }}
            </el-descriptions-item>
            <el-descriptions-item :span="24" :label="t('order.signing_date')">
              {{ currentRow?.signing_date }}
            </el-descriptions-item>
            <el-descriptions-item :span="24" :label="t('order.owner')">
              {{ useEnumeratePicker(operatorOptions.operator, currentRow?.owner ?? '') }}
            </el-descriptions-item>
            <el-descriptions-item :span="24" :label="t('order.single_order_method')">
              {{
                useEnumeratePicker(
                  operatorOptions.single_order_method,
                  currentRow?.single_order_method ?? ''
                )
              }}
            </el-descriptions-item>
            <el-descriptions-item :span="24" :label="t('order.partner')">
              {{ useEnumerateMultiplePicker(operatorOptions.operator, currentRow?.partner ?? '') }}
            </el-descriptions-item>
            <el-descriptions-item :span="24" :label="t('order.id_number')">
              {{ currentRow?.id_number }}
            </el-descriptions-item>
            <el-descriptions-item
              :span="24"
              :label="t('inventory.source_table')"
              v-if="!currentRow.isWholesal"
            >
              {{ useEnumeratePicker(operatorOptions.source, currentRow?.source ?? '') }}
            </el-descriptions-item>
            <el-descriptions-item :span="24" :label="t('order.currency')">
              {{ useEnumeratePicker(operatorOptions.currency, currentRow?.currency ?? '') }}
            </el-descriptions-item>
            <el-descriptions-item :span="24" :label="t('order.pay_terms')">
              {{ useEnumeratePicker(operatorOptions.pay_terms, currentRow?.pay_terms ?? 0) }}
            </el-descriptions-item>

            <el-descriptions-item :span="24" :label="t('order.product_total_original_amount')">
              {{ currentRow?.product_total_original_amount }}
            </el-descriptions-item>
            <el-descriptions-item :span="24" :label="t('order.product_total_amount')">
              {{ currentRow?.product_total_amount }}
            </el-descriptions-item>

            <el-descriptions-item :span="24" :label="t('order.logistics_fee')">
              {{ currentRow?.logistics_fee }}
            </el-descriptions-item>
            <el-descriptions-item :span="24" :label="t('inventory.first_leg_logistics_fee')">
              {{ currentRow?.first_leg_logistics_fee }}
            </el-descriptions-item>
            <el-descriptions-item
              :span="24"
              :label="t('wholesalOrder.advance_amount')"
              v-if="currentRow?.pay_terms === 1"
            >
              {{ currentRow?.advance_amount }}
            </el-descriptions-item>

            <el-descriptions-item :span="24" :label="t('order.theTotalAmountOfTheOrder')">
              {{ currentRow?.total_amount }}
            </el-descriptions-item>
            <el-descriptions-item :span="24" :label="t('order.orderStatus')">
              {{
                useEnumeratePicker(
                  operatorOptions.status,
                  currentRow.isWholesal ? currentRow?.status : currentRow?.order_status
                )
              }}
            </el-descriptions-item>
            <el-descriptions-item :span="24" :label="t('order.exceptionstatus')">
              {{ exceptionStatusText }}
            </el-descriptions-item>
            <el-descriptions-item :span="24" :label="t('order.theAmountToBePaid')">
              {{ currentRow?.pay_amount }}
            </el-descriptions-item>
            <el-descriptions-item :span="24" :label="t('order.payStatus')">
              {{ useEnumeratePicker(operatorOptions.pay_status, currentRow?.pay_status ?? '') }}
            </el-descriptions-item>
            <el-descriptions-item
              :span="24"
              :label="t('order.payment_deadline')"
              v-if="!currentRow.isWholesal"
            >
              {{ currentRow?.payment_deadline }}
            </el-descriptions-item>
            <el-descriptions-item
              :span="24"
              :label="t('order.shipping_start_date')"
              v-if="!currentRow.isWholesal"
            >
              {{ currentRow?.shipping_start_date }}
            </el-descriptions-item>
            <el-descriptions-item
              :span="24"
              :label="t('order.shipping_end_date')"
              v-if="!currentRow.isWholesal"
            >
              {{ currentRow?.shipping_end_date }}
            </el-descriptions-item>
            <el-descriptions-item
              :span="24"
              :label="t('order.receiptMethod')"
              v-if="!currentRow.isWholesal"
            >
              {{
                useEnumeratePicker(
                  operatorOptions.delivery_method,
                  currentRow?.delivery_method ?? ''
                )
              }}
            </el-descriptions-item>
            <el-descriptions-item
              :span="24"
              :label="t('order.proofOfReceipts')"
              v-if="!currentRow.isWholesal"
            >
              <div v-if="currentRow.voucher && currentRow.voucher.length">
                <ElImage
                  class="w-100px h-100px"
                  :src="currentRow.voucher[0]"
                  :previewTeleported="true"
                  :zoomRate="1.2"
                  :maxScale="7"
                  :minScale="0.2"
                  :previewSrcList="currentRow.voucher"
                  fit="cover"
                />
                <div>{{ `共${currentRow.voucher.length}张` }}</div>
              </div>
            </el-descriptions-item>
            <el-descriptions-item :span="24" :label="t('order.is_sop')">
              {{ currentRow?.is_sop === 1 ? '是' : '否' }}
            </el-descriptions-item>
            <el-descriptions-item :span="24" :label="t('order.notes')">
              {{ currentRow?.notes }}
            </el-descriptions-item>
            <el-descriptions-item :span="24" :label="t('order.order_remark')">
              <div class="w-full flex">
                <span class="leading-32px">{{ currentRow?.order_remark }}</span>
                <el-button
                  type="primary"
                  @click="showEditDialog = true"
                  style="margin-left: 10px"
                  class="flex-none"
                >
                  {{ t('common.edit') }}
                </el-button>
                <el-dialog v-model="showEditDialog" :title="t('order.order_remark')">
                  <el-input
                    v-model="editedOrderRemark"
                    type="textarea"
                    :autosize="{ minRows: 5, maxRows: 10 }"
                    maxlength="600"
                  />
                  <template #footer>
                    <el-button @click="showEditDialog = false">
                      {{ t('common.cancel') }}
                    </el-button>
                    <el-button type="primary" @click="saveOrderRemark">
                      {{ t('common.save') }}
                    </el-button>
                  </template>
                </el-dialog>
              </div>
            </el-descriptions-item>
            <el-descriptions-item :span="24" :label="t('order.create_time')">
              {{ currentRow?.create_time }}
            </el-descriptions-item>
            <el-descriptions-item :span="24" :label="t('order.creator')">
              {{ currentRow?.creator }}
            </el-descriptions-item>
            <el-descriptions-item :span="24" :label="t('order.update_time')">
              {{ currentRow?.update_time }}
            </el-descriptions-item>
            <el-descriptions-item :span="24" :label="t('order.updater')">
              {{ currentRow?.updater }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-collapse-transition>
  </el-card>
</template>

<style scoped>
.header {
  display: flex;
  height: 40px;
  padding: 0 10px;
  margin-bottom: 10px;
  font-weight: 900;
  background-color: #f3f3f3;
  border-radius: 5px;
  align-items: center;
  justify-content: space-between;
}

:deep(.is-bordered-label) {
  width: 200px;
}

/* 隐藏上传按钮 */

/* 隐藏 el-upload 的文本模式按钮 */
.only-preview :deep(.el-upload--picture-card) {
  display: none !important;
}

/* 也隐藏 el-upload--picture-card 的上传按钮 */
.only-preview :deep(.el-upload--picture-card) {
  display: none !important;
}
</style>
